<template>
    <div class="product-update">
        <el-form ref="ruleForm" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="商品分类" class="select-top" prop="product_category_id">
                <el-cascader v-model="productCateValue" :options="productCateOptions"></el-cascader>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="副标题" prop="sub_title">
                <el-input v-model="form.sub_title"></el-input>
            </el-form-item>
            <el-form-item label="商品品牌" prop="brand_id">
                <el-select v-model="form.brand_id" placeholder="请选择">
                    <el-option
                        v-for="item in brandOptions"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品介绍" prop="description">
                <el-input type="textarea" v-model="form.description"></el-input>
            </el-form-item>
            <el-form-item label="图片链接" prop="pic">
                <el-input v-model="form.pic"></el-input>
            </el-form-item>
            <el-form-item label="商品货号" prop="product_sn">
                <el-input v-model="form.product_sn"></el-input>
            </el-form-item>
            <el-form-item label="商品售价" prop="price">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="市场价" prop="original_price">
                <el-input v-model="form.original_price"></el-input>
            </el-form-item>
            <el-form-item label="商品库存" prop="stock">
                <el-input v-model="form.stock"></el-input>
            </el-form-item>
            <el-form-item label="计量单位" prop="unit">
                <el-input v-model="form.unit"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="weight">
                <el-input v-model="form.weight"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input v-model="form.sort"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { getProductById, fetchParentProductCate, updateProduct, getCateGoryList } from "@/network/product";

export default {
    data() {
        return {
            form: {
                brand_id: null, //商品品牌id
                brand_name: "", //商品品牌名称
                delete_status: 0, //删除标志位，默认填0，表示未删除
                description: "", //商品介绍
                name: "", //商品名称
                original_price: 0, //市场价
                pic: "", //商品图片的url地址
                price: 0, //商品售价
                product_category_id: null, //分类id
                product_category_name: "", //分类名称
                product_sn: "", //商品货号
                sort: 0, //排序
                stock: 0, //商品库存
                sub_title: "", //副标题
                unit: "", //计量单位
                weight: 0, //商品重量
                sale: 0, //商品销量
                publish_status: 0, //上架
                new_status: 0, //新品
                recommand_status: 0, //推荐
                verify_status: 0, //审核状态
            },
            productCateOptions: [], //分类的options数组
            productCateValue: [], //选中的分类
            brandOptions: [], //商品品牌列表
            rules: {
                product_category_id: [{ required: true, message: "请选择分类", trigger: "blur" }],
                name: [
                    { required: true, message: "请输入商品名称", trigger: "blur" },
                    {
                        min: 3,
                        max: 100,
                        message: "长度在3-100个字符之间",
                        trigger: "blur",
                    },
                ],
                sub_title: [{ required: true, message: "请输入副标题名称", trigger: "blur" }],
                brand_id: [{ required: true, message: "请选择品牌", trigger: "blur" }],
                description: [{ required: true, message: "请输入商品介绍", trigger: "blur" }],
                pic: [{ required: true, message: "请输入图片链接地址", trigger: "blur" }],
            },
        };
    },
    methods: {
        //修改页面打开时，添加 商品分类的选中状态
        async getParentProductCate(id) {
            //获取商品分类的父级数据
            var res = await fetchParentProductCate({ id: id });
            console.log(res);
            //将 一级分类和二级分类的id 赋值给productCateValue
            this.productCateValue.push(res.data.parent_id);
            this.productCateValue.push(res.data.id);
        },
        async getProductById() {
            const { data } = await getProductById({
                id: this.$route.params.id,
            });
            this.form = data;
            this.getParentProductCate(this.form.product_category_id);
            this.getCateData();
        },
        async getCateData() {
            var res = await getCateGoryList();
            var data = res.data;
            data.forEach((i) => {
                let children = []; //放子节点数据
                //重组子级节点数据
                i.children.forEach((j) => {
                    children.push({
                        label: j.name,
                        value: j.id,
                    });
                });
                this.productCateOptions.push({
                    label: i.name,
                    value: i.id,
                    children: children,
                });
            });
        },
        // 修改提交
        submitForm() {
            updateProduct(this.form).then((res) => {
                if (res.status == 200) {
                    //提示
                    this.$message({
                        message: "恭喜你，修改了一条商品记录",
                        type: "success",
                    });
                    //跳转到列表页
                    this.$router.push("/pms/product");
                }
            });
        },
    },
    mounted() {
        this.getProductById();
    },
};
</script>

<style lang="scss" scoped></style>
